<template>
  <!-- 玩具类商品列表 -->
  <el-row>
    <h4>玩具类商品列表</h4>
    <el-button type="success" size="default" @click="showDialog">添加商品</el-button>
  </el-row>

    <el-descriptions
      direction="vertical"
      border
      style="margin-top: 20px"
       v-for = "(item, index) in ArtData"
    >
      <el-descriptions-item
        :rowspan="2"
        :width="140"
        label="Photo"
        align="center"
      >
      <img :src= "item.photo" style="width: 100px; height: 100px;">
      </el-descriptions-item>
      <el-descriptions-item label="brandName">{{ item.brandName }}</el-descriptions-item>
      <el-descriptions-item label="introduction">{{   item.introduction }}</el-descriptions-item>
      <el-descriptions-item label="count">{{  item.count }}</el-descriptions-item>
      <el-descriptions-item label="operate">
        <el-button type="danger" size="small" @click="deleteBook(item.id as string)">下架</el-button>
        <el-button type="warning" size="small" @click="modifyBook(item)">修改</el-button>
        <el-button type="primary" size="small" @click="borrowBook(item)">出售</el-button>
      </el-descriptions-item>
    </el-descriptions>
    <Dialog
   @confirm="updateBooks"
   @cancel="(val: boolean) => { dialogVisible = val }"
   v-show="dialogVisible"
   :data="ArtData"
   :itemBook="itemBook"
  ></Dialog>
</template>

<script lang="ts" setup>
import { type Book, BookStatus, type BorrowBook} from '../../models/book';
import {initLocalStorage,getBooksData,deleteBookData,updateBookData} from '../../models/getBooksData'
import Dialog from '../CustomDialog.vue';
import { onBeforeUnmount, onMounted,ref,onUpdated } from 'vue';

const ArtData = ref<Book[]>([]);
const itemBook = ref<Book | undefined>(undefined);

onMounted( async () => {
   try{
    const allBooks=getBooksData()
    ArtData.value=allBooks.filter(item => item.status == BookStatus.ARTCATEGORY);
   }catch(error){
    console.error('获取数据失败:',error)
    // 解析失败，重新获取数据
    initLocalStorage()
    const allBooks=getBooksData()
    ArtData.value=allBooks.filter(item => item.status == BookStatus.ARTCATEGORY);
   }
})

// 封装更新数据
function gx(){
  const allBooks = getBooksData();
  ArtData.value = allBooks.filter(item => item.status == BookStatus.ARTCATEGORY);
}

// 弹窗
const dialogVisible = ref(false);
const showDialog = () => {
itemBook.value = undefined;
dialogVisible.value = true;
}

// 子组件confirm传值
const updateBooks=(newBooks: Book[])=>{
ArtData.value = newBooks.filter(item => item.status == BookStatus.ARTCATEGORY);
}

// 删除商品
const deleteBook=(id: string) => {
  // 刷新数据
  if(deleteBookData(id)){
    gx();
  }
}

// 修改商品
const modifyBook = (book: Book) => {
itemBook.value = {...book};
dialogVisible.value = true;
}

// 出售商品
const bookList = ref<BorrowBook[]>(JSON.parse(localStorage.getItem('bookList') as string) || []);
const borrowBook = (book: Book) => {
const allBooks = getBooksData();
const targetBook = allBooks.find(b => b.id === book.id);
if (targetBook && targetBook.count > 0) {
  targetBook.count--;
  if (targetBook.count!==0) {
    updateBookData(targetBook);
    bookList.value.push({ book: targetBook, time: new Date().toLocaleString() });
    localStorage.setItem('bookList', JSON.stringify(bookList.value));
    gx();
  }
  if(targetBook.count === 0){
    deleteBookData(targetBook.id as string);
    bookList.value.push({ book: targetBook, time: new Date().toLocaleString() });
    localStorage.setItem('bookList', JSON.stringify(bookList.value));
    gx();
  }
}
};
</script>

<style scoped lang="scss">
.el-row {
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
</style>
